<template>
  <view class="content">
	<view class="text">
		<image class="img" src="/static/f.png"></image>
		您好，{{ realName }}
	</view>
    <view class="profile">
		<view class="block">
		</view>
      <button class="logout" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const realName = ref('')


// 从本地存储读取账号列表和当前用户
onMounted(() => {
  const savedAccount = uni.getStorageSync('account');
  const merchantInfo = uni.getStorageSync('merchantInfo');
  if (merchantInfo && merchantInfo.realName) {
    realName.value = merchantInfo.realName;
  }
});

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        clearUserInformation();
        uni.showToast({
          title: '已退出登录',
          duration: 2000
        });
        // 重定向到登录页面
        uni.reLaunch({
          url: '/pages/login/login'
        });
      }
    }
  });
};

const clearUserInformation = () => {
  uni.removeStorageSync('merchantInfo');
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .text {
	width: 100%;
	height: 100rpx;
    font-size: 20px;
    font-weight: bold;
	display: flex;
	align-items: center;
    color: #333333;
	padding-left: 48rpx;
	.img {
		margin-right: 24rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%
	}
  }

  .profile {
	width: 610rpx;
	height: 350rpx;
	margin-top: 450rpx;
	padding-top: 104rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logout {
	  margin-top: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 410rpx;
      height: 100rpx;
      border-radius: 10rpx;
      font-size: 35rpx;
      letter-spacing: 5rpx;
      color: #FFFFFF;
      background-color: #808080;
    }
  }
}
</style>
